<template>
  <span class="input-number">
    <span class="prefix-box" v-if="prefixIconId">
      <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
    </span>
    <el-input-number
      v-model="currValue"
      :controls="false"
      v-bind="options"
    />
    <span class="suffix-box" v-if="suffixIconId">
      <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
    </span>
  </span>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const currValue = ref(null);
const prefixIconId = ref('');
const suffixIconId = ref('');

const init = () => {
  const compStyle = props.compStyle || {};
  prefixIconId.value = compStyle['prefixIcon'] || '';
  suffixIconId.value = compStyle['suffixIcon'] || '';

  if (!props.compData?.dataSourceType) {
    loadValue();
  }
};

const options = computed(() => {
  const compStyle = props.compStyle || {};
  const data = {};
  visual.addIfNotNull(data, compStyle, 'size');
  visual.addIfNotNull(data, compStyle, 'min');
  visual.addIfNotNull(data, compStyle, 'max');
  visual.addIfNotNull(data, compStyle, 'precision');
  visual.addIfNotNull(data, compStyle, 'placeholder');
  visual.addIfNotNull(data, compStyle, 'required');
  visual.addIfNotNull(data, compStyle, 'readonly');
  visual.addIfNotNull(data, compStyle, 'disabled');
  visual.addIfNotNull(data, compStyle, 'autocomplete');
  return data;
});

const loadValue = async() => {
  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);
  const defaultValue = dataList.length > 0 && dataList[0]['内容'];
  if (defaultValue || defaultValue === 0) {
    currValue.value = parseFloat(defaultValue + '');
  } else {
    currValue.value = null;
  }
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

watch(() => props.compData?.refresh, () => {
  loadValue();
});

onMounted(() => {
  init();
  loadValue();
});
</script>

<style scoped>
.input-number {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.input-number :deep(.el-input-number) {
  width: 100%;
}
.input-number :deep(.el-input-number--small) {
  padding: 0;
  text-align: left;
  width: 100%;
}
.input-number :deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.input-number:has(.prefix-box) :deep(.el-input__wrapper) {
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
.input-number:has(.suffix-box) :deep(.el-input__wrapper) {
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
}
.input-number :deep(.prefix-box) {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
}
.input-number :deep(.suffix-box) {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
}
</style>